<template>
  <div>
    <el-card>
      <div class="div2">
        <div class="width1">申请门店</div>
        <div class="width2">项目名称</div>
        <div class="width3">医生</div>
        <!-- <div class="width4">一级审核价(元)</div>
            <div class="width5">二级审核价(元)</div> -->
        <div class="width6">原价(元)</div>
        <div class="width7">数量/单价</div>
        <div class="width8">应收(元)</div>
        <div class="width9">综合折扣(%)</div>
        <div class="width10">项目实收(元)</div>
        <div class="width11">储值划扣(元)</div>
      </div>
      <div
        v-for="(item, index) in audit.yiyaItemBillingExtends"
        :key="index"
        class="div3"
      >
        <div v-if="audit.yiyaBillingMain" class="width1 border2">
          {{ audit.yiyaBillingMain.clinic }}
        </div>
        <el-tooltip class="item" effect="dark" placement="bottom">
          <div slot="content">
            {{ item.itemName }}
          </div>
          <div class="width2 border1">
            {{ item.itemName }}
          </div>
        </el-tooltip>
        <div class="width3 border1">
          {{ item.doctor }}
        </div>
        <!-- <div class="width4 border1">
                {{item.name3}}
              </div>
              <div class="width5 border1">
                {{item.name4}}
              </div> -->
        <div class="width6 border1">{{ item.unitPrice }}.00</div>
        <div class="width7 border1">{{ item.count }} {{ item.unit }}</div>
        <div class="width8 border1">{{ item.unitPrice * item.count }}.00</div>
        <el-tooltip class="item" effect="dark" placement="bottom">
          <div slot="content">
            <div>
              折扣:
              {{
                parseInt(
                  (item.projectReceivable / (item.unitPrice * item.count)) * 100
                )
              }}
              %
            </div>
            <div>{{ item.deductionMode }}</div>
          </div>
          <div class="width9 border1" :class="{ color2: item.discount <= 50 }">
            {{
              parseInt(
                (item.projectReceivable / (item.unitPrice * item.count)) * 100
              )
            }}%
          </div>
        </el-tooltip>
        <div class="width10 border1" :class="{ color2: item.discount <= 50 }">
          {{ item.projectReceivable }}.00
        </div>
        <div class="width11 border1">{{ item.deductionPrice }}.00</div>
      </div>
      <div v-if="audit.yiyaBillingMain" class="div4">
        <div class="width12 border2">合计</div>
        <div class="width8 border1">
          {{ audit.yiyaBillingMain.originalPrice }}.00
        </div>
        <div
          class="width9 border1"
          :class="{ color2: audit.yiyaBillingMain.allDiscount <= 50 }"
        >
          {{
            parseInt(
              (audit.yiyaBillingMain.receivable /
                audit.yiyaBillingMain.originalPrice) *
                100
            )
          }}%
        </div>
        <div
          class="width10 border1"
          :class="{ color2: audit.yiyaBillingMain.allDiscount <= 50 }"
        >
          {{ audit.yiyaBillingMain.receivable }}.00
        </div>
        <div class="width11 border1">{{ deductionPriceTotal }}.00</div>
      </div>
      <div v-if="audit.yiyaBillingMain" class="div1">
        <div>
          <span class="fonts2">总计应收 :</span>
          <span class="fonts2"
            >{{ audit.yiyaBillingMain.originalPrice }}.00</span
          >
        </div>
        <div>
          <span class="fonts2">总计实收 :</span>
          <span class="fonts2" style="color: blue"
            >{{ audit.yiyaBillingMain.receivable }}.00</span
          >
        </div>
        <div>
          <span class="fonts2">总计折扣 :</span>
          <span class="fonts2" style="color: #f76"
            >{{
              parseInt(
                (audit.yiyaBillingMain.receivable /
                  audit.yiyaBillingMain.originalPrice) *
                  100
              )
            }}%</span
          >
        </div>
      </div>

      <div v-if="audit.yiyaAuditDiscount" style="margin-top: 40px">
        <el-steps :active="active" simple>
          <el-step status="success">
            <div slot="title">已完成</div>
          </el-step>
          <el-step :status="result">
            <div slot="title">
              {{
                audit.yiyaAuditDiscount.auditerOneResult == 1
                  ? '等待审批'
                  : audit.yiyaAuditDiscount.auditerOneResult == 2
                  ? '审核驳回'
                  : '审批通过'
              }}
            </div>
          </el-step>
          <el-step :status="endResult">
            <div slot="title">
              {{
                audit.yiyaAuditDiscount.auditerTwoResult == 1
                  ? '等待审批'
                  : audit.yiyaAuditDiscount.auditerTwoResult == 2
                  ? '审核驳回'
                  : '审批通过'
              }}
            </div>
          </el-step>
        </el-steps>
      </div>
      <div v-if="audit.yiyaAuditDiscount" class="auditBox">
        <el-card class="leftDiv">
          <div class="title1">发起人</div>
          <div class="margin1">
            <span>{{ audit.yiyaAuditDiscount.proposer }}</span>
          </div>
          <div class="margin1">
            <span class="color1">{{
              audit.yiyaAuditDiscount.proposerTime
            }}</span>
          </div>
        </el-card>
        <el-card class="centerDiv">
          <div class="title1">一级审核人</div>
          <div class="margin1">
            <span>{{ audit.yiyaAuditDiscount.auditerOne }}</span>
          </div>
          <div v-if="audit.yiyaAuditDiscount.auditerOneTime" class="margin1">
            <span class="color1">{{
              audit.yiyaAuditDiscount.auditerOneTime
            }}</span>
          </div>
          <div
            v-if="audit.yiyaAuditDiscount.auditerOneResult == 1"
            class="margin1"
          >
            <div v-if="veriLevel == 1" class="margin1">
              <el-radio-group v-model="auditerResult">
                <el-radio-button label="3">通过</el-radio-button>
                <el-radio-button label="2">驳回</el-radio-button>
              </el-radio-group>
              <el-input
                v-model="auditerOneReason"
                style="margin-top: 8px"
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
              >
              </el-input>
            </div>
            <div v-else class="margin1">
              <el-radio-button label="3" disabled>通过</el-radio-button>
              <el-radio-button label="2" disabled>驳回</el-radio-button>
            </div>
            <div v-if="veriLevel == 1" class="margin1 submitBtn">
              <el-button type="primary" size="mini" @click="submitUpdata"
                >提交</el-button
              >
            </div>
          </div>
          <div
            v-if="audit.yiyaAuditDiscount.auditerOneResult == 2"
            class="margin1"
          >
            <span class="color2">驳回理由:</span>
            <span class="color2">{{
              audit.yiyaAuditDiscount.auditerOneReason == ''
                ? audit.yiyaAuditDiscount.auditerOneReason
                : '暂无内容'
            }}</span>
          </div>
        </el-card>

        <el-card class="rightDiv">
          <div class="title1">二级审核人</div>
          <div class="margin1">
            <span>{{ audit.yiyaAuditDiscount.auditerTwo }}</span>
          </div>
          <div v-if="audit.yiyaAuditDiscount.auditerTwoTime" class="margin1">
            <span class="color1">{{
              audit.yiyaAuditDiscount.auditerTwoTime
            }}</span>
          </div>
          <div
            v-if="
              audit.yiyaAuditDiscount.auditerTwoResult == 1 &&
              audit.yiyaAuditDiscount.auditerOneResult == 3
            "
            class="margin1"
          >
            <div v-if="veriLevel == 2" class="margin1">
              <el-radio-group v-model="auditerResult">
                <el-radio-button label="3">通过</el-radio-button>
                <el-radio-button label="2">驳回</el-radio-button>
              </el-radio-group>
              <el-input
                v-model="auditerTwoReason"
                style="margin-top: 8px"
                type="textarea"
                :rows="2"
                placeholder="请输入理由"
              >
              </el-input>
            </div>
            <div v-else class="margin1">
              <el-radio-button label="3" disabled>通过</el-radio-button>
              <el-radio-button label="2" disabled>驳回</el-radio-button>
            </div>
            <div v-if="veriLevel == 2" class="margin1 submitBtn">
              <el-button type="primary" size="mini" @click="submitUpdata"
                >提交</el-button
              >
            </div>
          </div>
          <div
            v-if="audit.yiyaAuditDiscount.auditerOneResult == 1"
            class="margin1"
          >
            <span
              v-if="audit.yiyaAuditDiscount.auditerTwoResult == 0"
              class="color2"
              >暂无二级审核</span
            >
            <span v-else class="color3">请等待一级审核人审核通过</span>
          </div>
          <div
            v-if="audit.yiyaAuditDiscount.auditerOneResult == 2"
            class="margin1"
          >
            <span class="color2">一级审核已驳回</span>
          </div>
          <div
            v-if="audit.yiyaAuditDiscount.auditerTwoResult == 2"
            class="margin1"
          >
            <span class="color2">驳回理由:</span>
            <span class="color2">{{
              audit.yiyaAuditDiscount.auditerTwoReason == ''
                ? audit.yiyaAuditDiscount.auditerTwoReason
                : '暂无内容'
            }}</span>
          </div>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<script>
import { updateDiscount } from '@/api/erp/discount'
export default {
  name: 'AuditDiscount',
  props: {
    audit: {
      type: Object,
      default: () => ({}),
    },
    veriLevel: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      active: this.veriLevel,
      auditerResult: 0,
      auditerOneReason: '',
      auditerTwoReason: '',
      newYiyaAuditDiscount: {},
      result: 'finish',
      endResult: '',
      deductionPriceTotal: '',
    }
  },
  mounted() {
    setTimeout(() => {
      if (this.audit.yiyaAuditDiscount.auditerOneResult == 1) {
        this.active = 1
      }
      if (this.audit.yiyaAuditDiscount.auditerOneResult == 2) {
        this.active = 1
        this.result = 'error'
      }
      if (
        this.audit.yiyaAuditDiscount.auditerOneResult == 3 &&
        this.audit.yiyaAuditDiscount.auditerTwoResult == 1
      ) {
        this.result = 'success'
        this.endResult = 'finish'
      }
      if (
        this.audit.yiyaAuditDiscount.auditerOneResult == 3 &&
        this.audit.yiyaAuditDiscount.auditerTwoResult == 2
      ) {
        this.result = 'success'
        this.endResult = 'error'
      }
      if (
        this.audit.yiyaAuditDiscount.auditerOneResult == 3 &&
        this.audit.yiyaAuditDiscount.auditerTwoResult == 3
      ) {
        this.result = 'success'
        this.endResult = 'success'
      }
      let total = 0
      for (const item in this.audit) {
        if (this.audit[item] instanceof Array) {
          this.audit[item].forEach((ele) => {
            total += ele.deductionPrice
          })
        }
      }
      this.deductionPriceTotal = total
    }, 300)
  },
  methods: {
    submitUpdata() {
      if (this.auditerResult == 0) {
        this.msgError('请选择审核结果')
        return
      } else {
        this.newYiyaAuditDiscount = this.audit.yiyaAuditDiscount
        //判断审核人
        if (this.veriLevel == 1) {
          this.newYiyaAuditDiscount.auditerOneResult = this.auditerResult
          this.newYiyaAuditDiscount.auditerOneReason = this.auditerOneReason
          this.newYiyaAuditDiscount.auditerOneTime = this.parseTime(
            new Date(),
            '{y}-{m}-{d} {h}:{i}:{s}'
          )
          if (this.newYiyaAuditDiscount.auditerTwoResult == 0) {
            //如果没有二级审核
            this.newYiyaAuditDiscount.status = this.auditerResult
          } else {
            //有二级审核
            if (this.newYiyaAuditDiscount.auditerOneResult == 2) {
              //一级审核不同意跟新审核单状态
              this.newYiyaAuditDiscount.status = this.auditerResult
            }
          }
        } else {
          this.newYiyaAuditDiscount.auditerTwoResult = this.auditerResult
          this.newYiyaAuditDiscount.auditerTwoReason = this.auditerTwoReason
          this.newYiyaAuditDiscount.auditerTwoTime = this.parseTime(
            new Date(),
            '{y}-{m}-{d} {h}:{i}:{s}'
          )
          this.newYiyaAuditDiscount.status = this.auditerResult
        }
        updateDiscount(this.newYiyaAuditDiscount)
        if (
          this.newYiyaAuditDiscount.auditerOneResult == 3 &&
          this.newYiyaAuditDiscount.auditerTwoResult == ''
        ) {
          this.result = 'success'
        }
        if (
          this.newYiyaAuditDiscount.auditerOneResult == 2 &&
          this.newYiyaAuditDiscount.auditerTwoResult == ''
        ) {
          this.result = 'error'
        }
        if (
          this.newYiyaAuditDiscount.auditerOneResult == 3 &&
          this.newYiyaAuditDiscount.auditerTwoResult == 1
        ) {
          this.result = 'success'
        }
        if (
          this.newYiyaAuditDiscount.auditerOneResult == 2 &&
          this.newYiyaAuditDiscount.auditerTwoResult == 1
        ) {
          this.result = 'error'
        }
        if (
          this.newYiyaAuditDiscount.auditerOneResult == 3 &&
          this.newYiyaAuditDiscount.auditerTwoResult == 1
        ) {
          this.endResult = 'finish'
        }
        if (
          this.newYiyaAuditDiscount.auditerOneResult == 3 &&
          this.newYiyaAuditDiscount.auditerTwoResult == 2
        ) {
          this.endResult = 'error'
        }
        if (
          this.newYiyaAuditDiscount.auditerOneResult == 3 &&
          this.newYiyaAuditDiscount.auditerTwoResult == 3
        ) {
          this.endResult = 'success'
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.div2 {
  background-color: #e2eeff;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  height: 60px;
  div {
    font-weight: 510;
    color: #4f5e7b;
    text-align: center;
  }
}
.div3,
.div4 {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  height: 60px;
  border-bottom: 1px solid #ccc;
  div {
    font-size: 18px;
    height: 60px;
    line-height: 60px;
    text-align: center;
  }
}
.div1 {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
  height: 60px;
  background-color: #eee;
}
.auditBox {
  margin-top: 20px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  .leftDiv,
  .centerDiv,
  .rightDiv {
    font-size: 20px;
    width: 33%;
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid #ccc;
    .imgBox {
      position: absolute;
      bottom: 0;
      right: 20px;
      img {
        flex: 0;
      }
    }
  }
}
.fonts2 {
  color: #222;
  font-weight: 550;
}
.width1 {
  width: 10%;
}
.width2 {
  width: 28%;
}
.width3 {
  width: 16%;
}
.width4 {
  width: 12%;
}
.width5 {
  width: 10%;
}
.width6 {
  width: 8%;
}
.width7 {
  width: 8%;
}
.width8 {
  width: 8%;
}
.width9 {
  width: 8%;
}
.width10 {
  width: 8%;
  font-weight: 700;
}
.width11 {
  width: 8%;
}
.width12 {
  width: 70%;
  padding-right: 14px;
  text-align: right !important;
}
.border1 {
  border-right: 1px solid #ccc;
}
.border2 {
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
.margin1 {
  margin: 10px 0;
}
.color1 {
  color: #ccc;
}
.color2 {
  color: #f76;
}
.color3 {
  color: #67c23a;
}
.title1 {
  font-size: 16px;
  color: blue;
}
.submitBtn {
  display: flex;
  justify-content: end;
}
</style>
